<template>
<div class="login">
  <el-card class="main-box" :body-style="{ padding: '0px',width:'75%' }">
  <div class="sign-in">
    <!-- 登录 -->
    <el-form
      class="form login-form clear-fix"
      ref="loginFormRef"
      :rules="loginRules"
      :model="loginForm"
      hide-required-asterisk="false"
    >
      <div class="login-title">物联网中台系统</div>
      <el-form-item label="用户名" prop="loginName">
        <el-input v-model="loginForm.loginName" type="text" placeholder="请输入用户名" ></el-input>
      </el-form-item>
      <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="rememberMe">
        <el-checkbox v-model="loginForm.rememberMe" >记住密码</el-checkbox></el-form-item>
      <el-form-item>
        <el-row gutter="10px" class="login_btn">
          <el-col :span="12">
            <el-button
              type="primary"
              class="form-btn submit-btn"
              @click="goLogin('loginFormRef')"
              v-if="!successMode"
            >
              登录
            </el-button>
            <el-button
              type="success"
              v-else
              class="form-btn"
            >
              登录成功
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button
              class="form-btn reset-btn"
              @click="resetForm('loginFormRef')"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
  </el-card>
</div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { UserModule } from '@/store/modules/user'

interface loginData{
  loginName:string|undefined|null,
  password:string|undefined|null,
  rememberMe:boolean|null
}
@Options({})
export default class Login extends Vue {
  public loginFormRef:any;
  public isRemember: boolean | undefined
  loginForm:loginData ={
    loginName: '',
    password: '',
    rememberMe: false
  }

  private loginRules: any = {
    loginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  }

  mounted () {
    console.log('我被执行了')
    this.getUserStore()
  }

  private getUserStore () {
    const username = localStorage.getItem('username')
    const password = localStorage.getItem('password')
    const rememberMe = Boolean(localStorage.getItem('rememberMe'))
    this.loginForm = {
      loginName: username,
      password: password,
      rememberMe: rememberMe
    }
  }

  public async goLogin (refId: any) {
    if (!refId) return
    (this as any).$refs[refId].validate((valid:any, fields:any) => {
      if (valid) {
        UserModule.Login(this.loginForm).then((resp) => {
          if (resp.success) {
            this.$router.push({ path: '/' })
            if (this.loginForm.rememberMe) {
              localStorage.setItem('username', this.loginForm.loginName + '')
              localStorage.setItem('password', this.loginForm.password + '')
              localStorage.setItem('rememberMe', this.loginForm.rememberMe + '')
            } else {
              localStorage.removeItem('username')
              localStorage.removeItem('password')
              localStorage.removeItem('rememberMe')
            }
          }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  public resetForm (refId:any) {
    // 重置表单
    (this as any).$refs[refId].resetFields()
    localStorage.removeItem('username')
    localStorage.removeItem('password')
    localStorage.removeItem('rememberMe')
    console.log('xxxx')
  }
}
</script>

<style lang="scss" scoped>
.login-title{
  font-size:32px;
  margin:20px auto;
  text-align:center;
}
.login{
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  background-image: url("../assets/images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
  overflow-y: hidden;
}
.login_btn{
  justify-content: center;
}
.el-col-12{
  flex: 0 0 35%;
}
.reset-btn{
  margin-left: 50px;
}
.el-card__body{
  width: 100%;
}
.main-box{
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  width: 500px;
}

</style>
